import {iReactivityApi, iVisualDataItemRenderer, iVisualDataListRenderer, iVisualEditorGetChildrenStyles, iVisualPage} from "../../packages/utils/types.base";
import {predefineComponentRender} from "../../pages/public/predefineComponent.render";
import {createClasses} from "../../packages/utils/createClass";
import {createVisualEditorActionRender, createVisualEditorComponentRender} from "../../packages";
import {getBaseContainerAttrs} from "../../packages/utils/getBaseContainerAttrs";
import {getCurrentPage} from "../../packages/utils/getCurrentPage";
import {getEditorContentAttrs} from "../../packages/utils/getEditorContentAttrs";
import {iProcessActionRender} from "../../packages/createVisualEditorUser/createVisualEditorAction/createVisualEditorActionRender";
import {getChildrenStylesUnderPage} from "../../packages/utils/createPageGetChildrenStyles";

export function createCmsPreview({api, processActionRender}: { api: iReactivityApi, processActionRender: iProcessActionRender }) {
    const {type, designComponent, reactive, computed, onMounted} = api
    const classes = createClasses(type)
    return designComponent({
        props: {
            data: {},
        },
        setup(setup: any) {
            const state = reactive({
                // 服务端渲染模式下，无法得知客户端分辨率，这里默认渲染PC端内容
                clientWidth: 9999,
            })

            /*当前显示的页面*/
            const currentPage = computed((): iVisualPage | undefined => getCurrentPage(setup.props.data.pages as any, state.clientWidth))

            /*监听窗口大小变化，横屏竖屏切换的时候响应式变化*/
            onMounted(() => {
                const onResize = () => state.clientWidth = document.body.clientWidth
                window.addEventListener('resize', onResize)
                onResize()
            })

            const render = {
                /*渲染组件*/
                component: createVisualEditorComponentRender(reactive),
                /*渲染动作*/
                action: createVisualEditorActionRender(api),
            }

            /*注册预定义组件渲染*/
            predefineComponentRender(render.component, api)
            /*注册预定义动作渲染*/
            processActionRender(render.action);

            const renderItem: iVisualDataItemRenderer = (props) => {
                const data = props.bindList![props.bindIndex]
                if (!data) {
                    return null
                }
                const componentRender = render.component.getComponentRender(data.code)
                if (!componentRender) {
                    return null
                }

                const baseContainerAttrs = getBaseContainerAttrs({
                    data,
                    style: props.style,
                    classes,
                })
                const content = componentRender({data, page: currentPage.value!, renderItem, renderList, isPreview: true})

                if (data.action) {
                    const componentAction = render.action.getActionRender(data.action.code)
                    if (!!componentAction) {
                        return componentAction(data.action, content, baseContainerAttrs)
                    }
                }
                return (
                    <div {...baseContainerAttrs}>{content}</div>
                )
            }

            const renderList: iVisualDataListRenderer = (props) => {
                return props.scope.childrenData?.map((item, index) => {
                    return renderItem({
                        bindList: props.scope.childrenData!,
                        bindIndex: index,
                        style: !props.getChildrenStyles ? undefined : props.getChildrenStyles({data: item, index: index, page: currentPage.value!})
                    })
                })
            }

            return () => {
                const contentAttrs = getEditorContentAttrs({classes, page: currentPage.value, isPreview: true})
                return (
                    <div {...contentAttrs}>
                        {currentPage.value?.childrenData.map((_, index) => renderItem({
                            bindList: currentPage.value?.childrenData,
                            bindIndex: index,
                            style: getChildrenStylesUnderPage({page: currentPage.value!, index})
                        }))}
                    </div>
                )
            }
        },
    })
}
